<template>
  <el-button>下面是报表预览</el-button>
  <div style="height: 100%" id="reportPreview"></div>

</template>
<script setup>

import axios from "axios";
const option = {
  mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式

  view: {
    width: () => document.documentElement.clientWidth,
    height: () => document.documentElement.clientHeight
  },   // 设置报表的宽高
  renderArrow: false,  // 是否显式 扩展方向图标
  showFreeze: false,  // 是否显式冻结线
  showGrid: false   // 是否显式网格线
};
let spreadSheet;
const preview = (sheetConfig) => {

  let data = axios({
    method: "post",
    url: "/api/xzreportdesigner/echo_report3/instanceDataEcho",
    data: {
      reportType: "reportDesigner",
      reportId: 'xzReportDesigner3',
    }
  }).then((response) => {
    data = response.data.data;
    spreadSheet = XZReport("#reportPreview", option, sheetConfig, data);
    return data;
  }).catch((error) => {
    console.log("33333#", error);
    spreadSheet = XZReport("#reportPreview", option, sheetConfig, []);
    return [];
  })

}

defineExpose({
  option, preview
})
</script>


<style scoped>

</style>
